<template>
  <div class="ui-category-body">
    <div class="information-menu">
      <div
        class="menu-list"
        :class="item.gc_id == ac_id ? 'menu-active' : ''"
        v-for="item in items"
        :key="item.id"
        @click="switchmenu(item.gc_id)"
      >{{ item.gc_name }}</div>
      <div class="menu-list" style="width: 1px;height: 10px"></div>
    </div>
    
    <div class="border">
      <!-- items存数据的数组 -->
      <div class="product-info" v-for="item in dataClass" :key="item.id" @click="productClick(item)">
        <img  class="product-icon" v-lazy="item.goods_image_url" />
        <span class="product-title">{{ item.goods_name }}</span>
        <div class="product-bottom">
          <span class="product-price">￥{{ item.goods_price }}</span>
          <span class="product-buy">{{ item.goods_salenum + item.v_salenum}}人已购买</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Indicator, Toast } from "mint-ui";
import {
  getStoreGoodsClass,
  classification,
} from "../../../api/homestoredetail";
import IndexProductBody from "../index/IndexProductBody";
export default {
  data() {
    return {
      items: false,
      currentItem: false,
      keyword: "",
      ac_id: "",
      dataClass: "",
    };
  },
  computed: {},
  created() {
    // this.switchmenu()
    this.getGoodsclassList();
    // this.ac_id = 
  },
  components: {
    IndexProductBody,
  },
  methods: {
    productClick: function (goodsId) {
      this.$router.push({ name: 'HomeGoodsdetail', query: { goods_id: goodsId.goods_id } })
    },
    switchmenu(e=0) {
      console.log(e)
      this.ac_id = e;
      console.log(this.ac_id)
      classification(this.$route.query.id,e).then((res)=>{
        this.dataClass = res.result.goods_list
        console.log(res.result)
      });
    },
    onItemClick(item) {
      this.currentItem = item;
    },
    getGoodsclassList(e=0) {
      getStoreGoodsClass(this.$route.query.id,e).then(
        (res) => {
          this.items = res.result.cate_list;
          this.dataClass = res.result.goods_list;
          this.ac_id = res.result.cate_list[0].gc_id;
          Indicator.close();
        },
        (error) => {
          Toast(error.message);
          Indicator.close();
        }
      );
    },

    goProduct(id) {
      let params = { id: this.$route.query.id, gc_id: id };
      this.$router.push({ name: "HomeStoreGoodslist", query: params });
    },
  },
};
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  display: none;
}
.product-list-body {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #f5f5f5;
}
.menu-active {
  color: $primaryColor;
  border-bottom: 2px solid $primaryColor;
}
.ui-category-body {
  background: #ffffff;
  width: 100%;
  .category-flex {
    display: flex;
    overflow: scroll;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: white;
    padding: 0 20px;

    .category-sidebar {
      flex-basis: 7rem;
      background-color: #f0f2f5;
      // border-bottom: 1px solid #f5f5f5;
      overflow-y: scroll;
      ul {
        border-right: 0.5px solid #e8eaed;
        li {
          display: block;
          padding: 0.8rem 0.25rem;
          a {
            color: #333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            font-size: 0.7rem;
            text-align: center;
          }
        }
        li.noActive {
          background-color: #f0f2f5;
          border-left: 0.1rem solid transparent;
          a {
            color: #333;
          }
        }
        li.sidbaractive {
          background-color: #ffffff;
          // border-left:0.1rem solid #e93b3d;
          a {
            font-weight: 600;
            color: $primaryColor;
          }
        }
      }
    }
    .category-content {
      width: 100%;
      background-color: #fff;
      overflow: auto;
      ul {
        height: 100%;
        li {
          display: block;
          padding: 1rem 0;
          text-align: center;
          cursor: pointer;
          border-bottom: 0.5px solid rgb(232, 234, 237);
          a {
            color: #333;
            font-size: 0.7rem;
            text-align: center;
          }
        }
      }
    }
  }
}

.information-menu {
  display: flex;
  overflow: scroll;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background: white;
  margin: 0.3rem 0;
  padding: 5px 20px;
}
.menu-active {
  color: $primaryColor;
  border-bottom: 2px solid $primaryColor;
}
.menu-list {
  flex: none;
  padding: 5px 0;
  font-size: 0.7rem;
  // border-bottom: 2px solid white;
  margin-right: 20px;
}

.border {
  border-top: 1px solid #f5f5f5;
  display: flex;
  flex-wrap: wrap;
}
.product-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.5rem;
  justify-content: flex-end;
  border-bottom: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
  width: 50%;
  box-sizing: border-box;
  .product-icon {
    align-self: center;
    width: 100%;
    box-sizing: border-box;
  }
  .product-title {
    color: #333;
    font-size: 0.6rem;
    margin-top: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .product-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    line-height: 1rem;
    .product-price {
      color: $primaryColor;
      font-size: 0.7rem;
    }
    .product-buy {
      color: #999999;
      font-size: 0.65rem;
    }
  }
}
</style>
